import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Title extends Component {
  static defaultProps = {
    name: '1React'
  }
  render () {
    return (
      <h1>
        <p>{ this.props.children }</p>
        欢迎来到 { this.props.name } 的世界
      </h1>
    )
  }
}
Title.propTypes = {
  // index.js:1 Warning: Failed prop type: 
  // Invalid prop `name` of type `string` supplied to `Title`,
  //  expected `number`
  // name: PropTypes.number // name属性为number属性
  name: PropTypes.string
}
const Content = (props) => {
  return (
    <p>
      { props.name } 核心库只关注于视图层
      <span>{ props.children }</span>
    </p>
  )
}
Content.defaultProps = {
  name: '1react.js'
}
// 如果一旦遇到，属性的类型 既可以是string，也可以是number时
Content.propTypes = {
  // name: PropTypes.string,
  // name: PropTypes.oneOfType([ // 一个对象可以是几种类型中的任意一个类型
  //   PropTypes.string,
  //   PropTypes.number
  // ])
  // 如果一个属性是必须传递的
  // name: PropTypes.string.isRequired // 单值必须传递说明
  name: PropTypes.oneOfType([ // 多个类型的单值必须传递说明
    PropTypes.string,
    PropTypes.number
  ]).isRequired
}
// 父组件给子组件传值
// 父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值
// 如果属性的值是一个变量，boolean类型或者number类型，对象，数组等需要使用{}包裹
// 这样，
// 如果子组件是类组件，在子组件中就可以通过 this.props.自定义属性名 访问到数据
// 如果子组件是函数式组件，在子组件中就可以通过 props.自定义属性名 访问到数据
// 可以使用静态类型检查  cnpm i prop-typs -S
// 自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。
// 如何验证
// 定义完组件之后，直接通过 Com.propTypes = { key: PropTypes.number } 验证
export default class App extends Component {
  render() {
    return (
      <div>
        <Title>11111</Title>
        <Content>222222</Content>
      </div>
    )
  }
}
